{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>菜单列表</h5>
        </div>
        <div class="ibox-content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="col-sm-3">
                        <div class="input-group">
                            <button type="button" class="btn btn-primary btn-outline" data-toggle="modal"
                                    data-target="#myModal">添加菜单
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <style>
                .layui-form-switch{
                    margin-top: 0;
                    width: 55px;
                    height: 24px;
                    line-height: 24px;
                }
            </style>
            <div class="example-wrap">
                <div class="example">
                    <form class="layui-form">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr class="long-tr">
                                <th width="6%">ID</th>
                                <th width="19%">权限名称</th>
                                <th width="15%">节点</th>
                                <th width="15%">菜单状态</th>
                                <th width="18%">添加时间</th>
                                <th width="10%">排序</th>
                                <th width="15%">
                                    <button type="submit" class="btn btn-info btn-xs" lay-submit
                                            lay-filter="ruleorder">更新排序
                                    </button>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {foreach name="admin_rule" item="v"}
                            <tr class="long-td">
                                <td>{$v.id}</td>
                                <td style='text-align:left;padding-left:{if condition="$v.leftpin neq 0"}{$v.leftpin}px{/if}'>
                                    {$v.lefthtml}
                                    {if condition="$v['css']"}
                                    <i class="{$v['css']}"></i>
                                    {/if}
                                    {$v.title}
                                </td>
                                <td>{$v.name}</td>
                                <td>
                                    <input type="checkbox" name="status" value="{$v.id}"  lay-skin="switch" lay-text="开启|关闭" lay-filter="status" {$v.status==1?'checked':''}>
                                </td>
                                <td>{$v.create_time}</td>
                                <td style="padding: 3px">
                                    <div>
                                        <input name="{$v.id}" value=" {$v.sort}" width="50%" style="text-align:center;"
                                               class="layui-input">
                                    </div>
                                </td>
                                <td>
                                    <div class="layui-btn-group">
                                    <a href="{:url('edit_rule',['id'=>$v.id])}"
                                       class="layui-btn layui-btn-normal layui-btn-xs">
                                        <i class="fa fa-paste"></i> 编辑</a>&nbsp;&nbsp;
                                    <a href="javascript:;" onclick="del_rule({$v.id})"
                                       class="layui-btn layui-btn-danger layui-btn-xs">
                                        <i class="fa fa-trash-o"></i> 删除</a>
                                    </div>
                                </td>
                            </tr>
                            {/foreach}
                            <tr class="long-tr">
                                <th width="6%">ID</th>
                                <th width="19%">权限名称</th>
                                <th width="15%">节点</th>
                                <th width="15%">菜单状态</th>
                                <th width="18%">添加时间</th>
                                <th width="10%">排序</th>
                                <th width="15%">
                                    <button type="submit" class="btn btn-info btn-xs" lay-submit
                                            lay-filter="ruleorder">更新排序
                                    </button>
                                </th>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
{include file="public/footer" /}
<!--添加菜单-->
<div class="modal  fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h3 class="modal-title">添加菜单</h3>
            </div>
            <form class="layui-form layui-form-pane" action="">
                <div class="ibox-content">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属父级</label>
                        <div class="layui-input-block">
                            <select name="pid" class="layui-input" style="display: block">
                                <option value="0">--默认顶级--</option>
                                {foreach name="admin_rule" item="v"}
                                <option value="{$v.id}" style="margin-left:55px;">{$v.lefthtml}{$v.title}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" id="title" placeholder="输入菜单名称" class="layui-input"/>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">节点</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" id="name" placeholder="模块/控制器/方法" class="layui-input"/>
                            <span class="help-block m-b-none">如：admin/user/adduser (一级节点添加“#”即可)</span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">CSS样式</label>
                        <div class="layui-input-block">
                            <input type="text" name="css" id="css" placeholder="输入菜单名称前显示的CSS样式" class="layui-input"/>
                            <span class="help-block m-b-none"> <a href="http://fontawesome.dashgame.com/"
                                                                  target="_black">选择图标</a> 如fa fa-user </span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排&nbsp;序</label>
                        <div class="layui-input-block">
                            <input type="text" name="sort" id="sort" value="50" placeholder="输入排序"
                                   class="layui-input"/>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状&nbsp;态</label>
                        <div class="layui-input-block">
                            <input type="radio" name='status' value="1" checked="checked" title="开启" style="display: inline-block"/>开启&nbsp;&nbsp;
                            <input type="radio" name='status' value="0" title="关闭" style="display: inline-block"/>关闭
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" lay-submit lay-filter="add_rule"><i
                            class="fa fa-save"></i> 保存
                    </button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close"></i> 关闭
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    var form = layui.form;
        form.on('submit(add_rule)', function (data) {
            var data = data.field;
            if (!data.title) {
                layer.msg('请输入菜单名称', {icon: 2, time: 1500, shade: 0.1}, function (index) {
                    layer.close(index);
                });
                return false;
            }

            if (!data.name) {
                layer.msg('控制器/方法不能为空', {icon: 0, time: 1500, shade: 0.1}, function (index) {
                    layer.close(index);
                });
                return false;
            }
            $.post("{:url('add_rule')}", data, function (result) {
                if (result.code == 1) {
                    layer.msg(result.msg, {icon: 6, time: 1500, shade: 0.1}, function (index) {
                        window.location.href = "{:url('menu/index')}";
                    });
                } else {
                    layer.msg(result.msg, {icon: 6, time: 1500, shade: 0.1});
                    return false;
                }
            });
            return false;
        });


    /**
     * 状态
     */
    form.on('switch(status)', function (obj) {
        $.post("{:url('rule_state')}", {id: this.value}, function (result) {
            //layer.tips(result.msg, obj.othis, {tips: 4});
        });
    });

    //更新排序
        form.on('submit(ruleorder)', function (data) {
            var data = data.field;
            $.post("{:url('ruleorder')}", data, function (result) {
                if (result.code == 1) {
                    layer.msg(result.msg, {icon: 1, time: 1500, shade: 0.1}, function (index) {
                        window.location.href = "{:url('menu/index')}";
                    });
                } else {
                    layer.msg(result.msg, {icon: 2, time: 1500, shade: 0.1}, function (index) {
                        layer.close(index);
                        window.location.href = result.url;
                    });
                }
            });
            return false;
        });


    /**
     * 删除菜单
     * @param id
     */
    function del_rule(id) {
        layer.confirm('确认删除此菜单?', {icon: 3, title: '提示'}, function (index) {
            $.getJSON('./del_rule', {'id': id}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1, time: 1500, shade: 0.1}, function (index) {
                        layer.close(index);
                        window.location.href = "{:url('menu/index')}";
                    });

                } else {
                    layer.msg(res.msg, {icon: 0, time: 1500, shade: 0.1});
                }
            });

            layer.close(index);
        })

    }


</script>
</body>
</html>